import React, { Suspense, useState, useEffect } from "react";
import { Switch, Route, Redirect, useLocation } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import { ClimbingBoxLoader } from "react-spinners";
import { PrivateRoute } from "./helpers/PrivateRoute";
import { ThemeReducerProps } from "./stores/index.types";

// Layout Blueprints

import LeftSidebar from "./components/LeftSidebar/LeftSidebar";
import LoginPage from "./components/LoginPage/LoginPage";
import SignupPage from "./components/SignupPage/SignupPage";
import SignupFacebook from "./components/SignupPage/components/SignupFacebook";
import SignupGoogle from "./components/SignupPage/components/SignupGoogle";
import ForgetPassword from "./components/ForgetPassword/ForgetPassword";
import VerifyOtp from "./components/VerifyOtp/VerifyOtp";
import VerifyEmailSent from "./components/VerifyEmailSent/VerifyEmailSent";
import VerifiedMessage from "./components/VerifiedMessage/VerifiedMessage";

//  Pages

import Dashboard from "./pages/Dashboard";

import { ThemeProvider } from "@material-ui/core/styles";
import { darkMuiTheme, lightMuiTheme } from "./theme";
import { useSelector } from "react-redux";

const Routes = () => {
  const location = useLocation();
  const [currentTheme, setCurrentTheme] = useState(lightMuiTheme);
  const selectedTheme = useSelector(
    (state: { themeOptions: ThemeReducerProps }) =>
      state.themeOptions.palletType
  );

  useEffect(() => {
    const newTheme = selectedTheme === "dark" ? darkMuiTheme : lightMuiTheme;
    setCurrentTheme(newTheme);
  }, [selectedTheme]);

  const pageVariants = {
    initial: {
      opacity: 0,
    },
    in: {
      opacity: 1,
    },
    out: {
      opacity: 0,
    },
  };

  const pageTransition = {
    type: "tween",
    ease: "linear",
    duration: 0.3,
  };

  const SuspenseLoading = () => {
    const [show, setShow] = useState(false);

    useEffect(() => {
      let timeout = setTimeout(() => setShow(true), 300);
      return () => {
        clearTimeout(timeout);
      };
    }, []);

    return (
      <>
        <AnimatePresence>
          {show && (
            <motion.div
              key="loading"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              transition={{ duration: 0.4 }}
            >
              <div className="d-flex align-items-center flex-column vh-100 justify-content-center text-center py-3">
                <div className="d-flex align-items-center flex-column px-4">
                  <ClimbingBoxLoader color={"#3c44b1"} loading={true} />
                </div>
                <div className="text-muted font-size-xl text-center pt-3">
                  Please wait
                  <span className="font-size-lg d-block text-dark">
                    We need more time...!
                  </span>
                </div>
              </div>
            </motion.div>
          )}
        </AnimatePresence>
      </>
    );
  };

  console.log("theme -->", currentTheme);

  return (
    <AnimatePresence>
      <Suspense fallback={<SuspenseLoading />}>
        <Switch>
          <Redirect exact from="/" to="/login" />
          <Route path="/login" component={LoginPage} />
          <Route path="/signup" component={SignupPage} />
          <Route path="/signupFacebook" component={SignupFacebook} />
          <Route path="/signupGoogle" component={SignupGoogle} />
          <Route path="/forgetPassword" component={ForgetPassword} />
          <Route path="/verifyOtp:token?" component={VerifyOtp} />
          <Route path="/emailVerifySent/:email" component={VerifyEmailSent} />
          <Route path="/verify/email:token?" component={VerifiedMessage} />

          <ThemeProvider theme={currentTheme}>
            <PrivateRoute path="/dashboard">
              <LeftSidebar>
                <Switch location={location} key={location.pathname}>
                  <motion.div
                    initial="initial"
                    animate="in"
                    exit="out"
                    variants={pageVariants}
                    transition={pageTransition}
                  >
                    <Route path="/dashboard" component={Dashboard} />
                  </motion.div>
                </Switch>
              </LeftSidebar>
            </PrivateRoute>
          </ThemeProvider>
        </Switch>
      </Suspense>
    </AnimatePresence>
  );
};

export default Routes;
